<template>
  <div class="category">
    <!-- 按钮开始 -->
    <el-button size="small" type="primary" @click="showHandler">添加</el-button>
    <el-button size="small" type="primary">查询</el-button>
    <!-- 按钮结束 -->
    <!-- 数据表格开始 -->
    <el-table :data="categorys" stripe style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" align="center">
      </el-table-column>
      <el-table-column label="图标" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="right">
            <img width="100%" :src="scope.row.icon" alt="" />
            <div slot="reference" class="name-wrapper">
              <img width="30px" :src="scope.row.icon" alt="" />
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="序号"> </el-table-column>
      <el-table-column prop="operate" label="操作" width="190px" align="center">
        <template slot-scope="scope">
          <el-button @click="editHandler(scope.row)" size="mini" type="primary"
            >编辑</el-button
          >
          <el-button
            @click="deleteHandler(scope.row.id)"
            size="mini"
            type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 数据表格结束 -->
    <!-- 分页开始 -->
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :page-size="list.pageSize"
        :total="total"
        @current-change="changeHandler"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <!-- 表单开始 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="栏目名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="num">
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-upload
            class="upload-demo"
            action="http://81.69.24.232/pet/jz_upload.php"
            multiple
            :on-success="succseeHandler"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 表单结束 -->
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="submitHandler"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>

<script>
// import { get } from "../../utils/request";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      // page信息
      list: {
        page: 1,
        pageSize: 2,
      },
      dialogFormVisible: false,
      // 表单数据
      ruleForm: {
        name: "家庭产品",
        num: 100,
        icon: "",
      },
      // 表单验证
      rules: {
        name: [
          { required: true, message: "请输入栏目名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      title: "",
    };
  },
  computed: {
    ...mapState("category", ["categorys", "total"]),
  },
  created() {
    // 查询所有栏目信息
    this.findAllCategory(this.list);
  },
  methods: {
    // 查询所有栏目信息
    ...mapActions("category", [
      "findAllCategory",
      "saveCategory",
      "deleteCategory",
    ]),
    // 查询所有栏目信息
    // findAllCategory() {
    //   // 异步操作
    //   get("/productCategory/pageQuery", this.list).then((res) => {
    //     if (res.status === 200) {
    //       this.categorys = res.data.list;
    //       this.total = res.data.total;
    //     } else {
    //       this.$message({
    //         type: "error",
    //         message: res.message,
    //       });
    //     }
    //   });
    // },

    // 分页效果
    changeHandler(page) {
      this.list.page = page;
      this.findAllCategory(this.list);
    },
    // 显示添加栏目信息模态框
    showHandler() {
      this.title = "新增栏目信息";
      this.dialogFormVisible = true;
    },
    // 确认提交
    submitHandler() {
      this.saveCategory(this.ruleForm).then((res) => {
        if (res.status === 200) {
          this.findAllCategory(this.list);
          this.dialogFormVisible = false;
          this.$message({
            type: "success",
            message: res.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    // 点击编辑
    editHandler(data) {
      // 将当前行的内容赋值给ruleForm
      this.ruleForm = data;
      this.title = "编辑栏目信息";
      this.dialogFormVisible = true;
    },
    // 点击删除
    deleteHandler(id) {
      let params = { id };
      this.deleteCategory(params).then((res) => {
        if (res.status === 200) {
          this.findAllCategory(this.list);
          this.$message({
            type: "success",
            message: res.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    // 文件上传成功后
    succseeHandler(file) {
      // file:文件路径
      console.log(file);
      this.ruleForm.icon = file;
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  margin: 1em auto;
  float: right;
}
</style>
